<template>
  <div class="shrink-box no-drag">
    <div class="flex">
      <template v-if="isLogin">
        <div class="w-58n h-39n bgfff round-10 mb-10 flex-col-center">
          <div class="flex">
            <a-image
              width="54"
              class="mr-10"
              :preview="false"
              :src="
                weixinInfo.avatar ||
                'https://images.maishoumm.com/uploads/avatar/20210423204707729.jpg'
              "
            />
            <div class="flex-col flex-j-c">
              <span class="mb-10 font-bold">{{ weixinInfo.nickname }}</span>
              <a-popover>
                <span class="text999 m-w-120 text-overflow-1"
                  >微信号：{{ weixinInfo.account }}</span
                >
                <template #content>
                  <span class="text999">{{ weixinInfo.account }}</span>
                </template>
              </a-popover>
            </div>
          </div>
          <div class="w-full mt-16 px-20">
            <a-button type="primary" long size="large" class="bge5" @click="onOutWxFun">
              <template #icon>
                <span class="iconfont icon-tuichudenglu"></span>
              </template>
              退出登录
            </a-button>
          </div>
        </div>
        <div class="bgfff w-58n h-39n round-10 mb-10 ml-10 flex-col flex-j-c box-border pl-20">
          <div class="flex flex-a-c">
            <span
              class="iconfont icon-jiaosequnti text-size-30 mr-6"
              :class="isLogin ? 'textff8d1a' : 'texte5'"
            ></span>
            <span class="font-bold text-size-20" :class="isLogin ? '' : 'texte5'">跟群消息数</span>
          </div>
          <span class="mt-12" :class="isLogin ? '' : 'texte5'">今日转发（条）</span>
          <div class="font-bold text-size-36 pl-16n mt-12" :class="isLogin ? '' : 'texte5'">
            {{ isLogin ? sendNum.msgNum : '-' }}
          </div>
        </div>
        <div class="bgfff w-58n h-39n round-10 ml-10 mb-10 flex-col flex-j-c box-border pl-20">
          <div class="flex flex-a-c">
            <span
              class="iconfont icon-shangpinguanli text-size-30 mr-6"
              :class="isLogin ? 'textff8d1a' : 'texte5'"
            ></span>
            <span class="font-bold text-size-20" :class="isLogin ? '' : 'texte5'">跟群商品数</span>
          </div>
          <span class="mt-12" :class="isLogin ? '' : 'texte5'">今日转发（个）</span>
          <div class="font-bold text-size-36 pl-16n mt-12" :class="isLogin ? '' : 'texte5'">
            {{ isLogin ? sendNum.goodsNum : '-' }}
          </div>
        </div>
      </template>
      <template v-else>
        <div v-if="!hasWeixin" class="flex-col-center w-100n h-39n px-20 no-drag">
          <a-alert type="warning" class="w-fit">{{ tip }}</a-alert>
          <a-space class="mt-20">
            <a-button type="primary" @click="onInstallWx"> 下载安装包 </a-button>
            <a-button :loading="loginLoading" @click="onInitWxFun">我已安装，登录并连接</a-button>
          </a-space>
        </div>
        <div v-else class="w-58n h-39n no-drag flex-center">
          <div class="bgfff p-20 round-12">
            <div class="w-54 h-54 round-p-50 bge5 mx-auto flex-center">
              <icon-wechat size="32" class="textfff" />
            </div>
            <div class="w-full mt-16">
              <a-button
                type="primary"
                long
                size="large"
                @click="onInitWxFun"
                :loading="loginLoading"
              >
                登录微信
              </a-button>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { reAssign, getT } from '@renderer/common/js/utils'
import { Modal } from '@arco-design/web-vue'
import $bus from '@renderer/common/js/bus'
import { IconWechat } from '@arco-design/web-vue/es/icon'
const { ipcRenderer } = window.electron
const isLogin = ref(false)
const hasWeixin = ref(true)
const loginLoading = ref(false)
const tip = ref()
const weixinInfo = reactive({
  account: undefined,
  avatar: undefined,
  nickname: undefined,
  phone: undefined,
  pid: undefined,
  unread_msg_count: undefined,
  wx_user_dir: undefined,
  wxid: undefined
})
const sendNum = reactive({
  msgNum: 0,
  goodsNum: 0
})
ipcRenderer.on('closeCallback', async () => {
  await window.ipcRenderer.invoke('storeDel', 'weixinInfo')
  isLogin.value = false
  reAssign(weixinInfo, false)
})
ipcRenderer.on('loginWeiXinSuccess', async (event, message) => {
  reAssign(weixinInfo, message)
  await window.ipcRenderer.invoke('storeSet', 'weixinInfo', message)
  isLogin.value = true
  loginLoading.value = false
  ipcRenderer.send('onCreatStatic')
  $bus.emit('getWxGroupList')
})
ipcRenderer.on('sendNum', async (event, message) => {
  if (message && JSON.stringify(message) != '{}') {
    reAssign(sendNum, message)
  }
})

// 微信版本错误或未安装回调
ipcRenderer.on('versionMis', async (event, message) => {
  hasWeixin.value = message?.reday
  if (message.current)
    tip.value = `当前安装的微信版本号是：${message.current}，当前扩展支持的版本是：${message.target}，请安装对应版本微信体验全部功能`
  else tip.value = `当前没有安装微信，请先安装微信`
  loginLoading.value = false
})
// 点击下载微信安装包
const onInstallWx = () => {
  ipcRenderer.send('installWeixin')
}
// 点击连接微信
const onInitWxFun = () => {
  loginLoading.value = true
  ipcRenderer.send('initWxFun')
  setTimeout(() => {
    loginLoading.value = false
  }, 5000)
}
// 退出微信
const onOutWxFun = () => {
  Modal.info({
    title: '是否确认退出当前微信？',
    hideCancel: false,
    onOk: async () => {
      await window.ipcRenderer.invoke('storeDel', 'weixinInfo')
      ipcRenderer.send('outWx')
    }
  })
}
onMounted(async () => {
  onInitWxFun()
})
</script>

<style scope lang="scss">
.shrink-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #eee;
  box-sizing: border-box;
  padding: 10px;
  background: #ececec;
  .arco-textarea-wrapper:focus-within,
  .shrink-box .arco-textarea-wrapper.arco-textarea-focus {
    border: 1px solid rgb(var(--primary-6)) !important;
  }
}
.bge5 {
  background: #e5e5e5 !important;
  color: #333 !important;
}
.texte5 {
  color: #e5e5e5;
}
.m-w-120 {
  width: 120px !important;
}
.textff8d1a {
  color: #ff8d1a;
}
</style>
